<!-- 热销商品图表 -->
<template>
    <div class="com-container">
        <div class="com-chart" ref="hot_ref"></div>
        <span class="iconfont arr-left" @click="toLeft" :style="comStyle"
            >&#xe6ef;</span
        >
        <span class="iconfont arr-right" @click="toRight" :style="comStyle"
            >&#xe6ed;</span
        >
        <span class="cat-name" :style="comStyle">{{ catName }}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            chartInstance: null,
            allData: null,
            currentIndex: 0, // 当前所展示出的一级分类数据
            titleFontSize: 0,
        }
    },
    watch: {
        theme() {
            this.chartInstance.dispose() // 销毁当前的图表
            this.initChart() // 重新以最新的主题名称初始化图表对象
            this.screenAdapter() // 完成屏幕的适配
            this.updateChart() // 更新图表的展示
        },
    },
    computed: {
        theme() {
            return this.$store.state.theme
        },
        catName() {
            if (!this.allData) {
                return ''
            } else {
                return this.allData[this.currentIndex].name
            }
        },
        comStyle() {
            return {
                fontSize: this.titleFontSize + 'px',
            }
        },
    },
    mounted() {
        this.initChart()
        this.getData()
        window.addEventListener('resize', this.screenAdapter)
        this.screenAdapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.screenAdapter)
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(
                this.$refs.hot_ref,
                this.theme
            )
            const initOption = {
                title: {
                    text: '▎ 热销商品的占比',
                    left: 20,
                    top: 20,
                },
                legend: {
                    top: '15%',
                    icon: 'circle',
                },
                tooltip: {
                    show: true,
                    formatter: (arg) => {
                        const thirdCategory = arg.data.children
                        // 计算出所有三级分类的数值总和
                        let total = 0
                        thirdCategory.forEach((item) => {
                            total += item.value
                        })
                        let retStr = ''
                        thirdCategory.forEach((item) => {
                            retStr += `
              ${item.name}:${parseInt((item.value / total) * 100) + '%'}
              <br/>
              `
                        })
                        return retStr
                    },
                },
                series: [
                    {
                        type: 'pie',
                        label: {
                            show: false,
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                            labelLine: {
                                show: false,
                            },
                        },
                    },
                ],
            }
            this.chartInstance.setOption(initOption)
        },
        async getData() {
            // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
            const { data: ret } = await this.$http.get('/api/hotproduct')
            this.allData = ret
            this.updateChart()
        },
        updateChart() {
            // 处理图表需要的数据
            const legendData = this.allData[this.currentIndex].children.map(
                (item) => {
                    return item.name
                }
            )
            const seriesData = this.allData[this.currentIndex].children.map(
                (item) => {
                    return {
                        name: item.name,
                        value: item.value,
                        children: item.children, // 新增加children的原因是为了在tooltip中的formatter的回调函数中,来拿到这个二级分类下的三级分类数据
                    }
                }
            )
            const dataOption = {
                legend: {
                    data: legendData,
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
            }
            this.chartInstance.setOption(dataOption)
        },
        screenAdapter() {
            this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: this.titleFontSize,
                    },
                },
                legend: {
                    itemWidth: this.titleFontSize / 2,
                    itemHeight: this.titleFontSize / 2,
                    itemGap: this.titleFontSize / 2,
                    textStyle: {
                        fontSize: this.titleFontSize / 2,
                    },
                },
                series: [
                    {
                        radius: this.titleFontSize * 4.5,
                        center: ['50%', '60%'],
                    },
                ],
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
        },
        toLeft() {
            this.currentIndex--
            if (this.currentIndex < 0) {
                this.currentIndex = this.allData.length - 1
            }
            this.updateChart()
        },
        toRight() {
            this.currentIndex++
            if (this.currentIndex > this.allData.length - 1) {
                this.currentIndex = 0
            }
            this.updateChart()
        },
    },
}
</script>

<style lang="less" scoped>
.arr-left {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
}
.arr-right {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
}
.cat-name {
    position: absolute;
    left: 80%;
    bottom: 20px;
    color: white;
}
</style>
